<template>
    <div class="count-box">
        <el-card shadow="hover">
            <div class="">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-statistic group-separator="," :value="$global.btoGb(parseInt(countInfo.totalSpace))" title="系统空间">
                                <template slot="suffix">
                                    <span>GB</span>
                                </template>
                            </el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-statistic group-separator="," :value="$global.btoGb(parseInt(countInfo.useSpace))" title="使用空间">
                                <template slot="suffix">
                                    <span>GB</span>
                                </template>
                            </el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-statistic group-separator="," :value="countInfo.totalUser" title="用户数量">
                                <template slot="suffix">
                                    <span>个</span>
                                </template>
                            </el-statistic>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            <el-statistic group-separator="," :value="countInfo.totalFile" title="文档数量">
                                <template slot="suffix">
                                    <span>个</span>
                                </template>
                            </el-statistic>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "count",
    mounted() {
        this.getDashBoardCount()
    },
    methods: {
        async getDashBoardCount() {
            let res = await this.$store.dispatch('getDashBoardCount')
            if(!res.success) this.$global.resError(res)
        }
    },
    computed:{
        countInfo(){
            return this.$store.state.count.dashBoradCount
        }
    }
}
</script>

<style scoped>
.count-box {
    width: 100%;
}

.grid-content {
    text-align: center;
}
</style>